<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<form id="myForm" action="/table" method="post">
    submit: <input type="submit" value="Submit">

    <table id="myTable" style="border:1px solid black;">
        <thead>
        <tr id="tableHead">
            <th>auto</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
        </tr>
        </tbody>
    </table>
</form>
<span>
    <button onclick="addRow()">Add Row</button>
    <button onclick="addColumn()">Add Column</button>
</span>

<script>
    document.getElementById('myForm').addEventListener('submit', function (e) {
        e.preventDefault(); // 阻止表单的默认提交行为

        var table = document.getElementById('myTable');
        var rows = table.getElementsByTagName('tr');
        var formData = new FormData();

        // 遍历表格行，收集首列数据
        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].getElementsByTagName('td');
            if (cells.length > 0) { // 跳过没有单元格的行（例如，可能只包含<th>的行）
                var firstCellText = cells[0].textContent || cells[0].innerText; // 兼容不同浏览器
                formData.append('first_column[' + i + ']', firstCellText);
            }
        }

        // 收集首行（表头）数据
        var headers = table.rows[0].getElementsByTagName('th');
        for (var j = 0; j < headers.length; j++) {
            formData.append('header[' + j + ']', headers[j].textContent || headers[j].innerText);
        }

        // 收集原有的表单输入数据
        var inputs = document.querySelectorAll('#myForm input[type="text"]');
        inputs.forEach(function (input, index) {
            formData.append(input.name, input.value);
        });

        // 使用fetch API提交表单数据
        fetch('/table', {
            method: 'POST',
            body: formData
        })
            .then(response => response.text()) // 或者response.json()，根据服务器响应类型决定
            .then(data => {
                console.log(data); // 处理服务器响应
            })
            .catch(error => {
                console.error('Error:', error);
            });
    });


    function addRow() {
        let table = document.getElementById("myTable");
        let row = table.insertRow(-1); // -1 表示在表格末尾添加
        let cell = row.insertCell(0);
        // 创建一个<textarea>元素，并将其添加到cell中
        let input = document.createElement("textarea");
        cell.appendChild(input);
    }

    function addColumn() {

        let tr = document.getElementById("tableHead");
        let cell = tr.insertCell(-1);
        // 创建一个新的<select>元素
        let select = document.createElement("select");
        // 创建几个<option>元素并添加到<select>中
        let options = {
            "TC": "中文(繁体)",
            "RU": "俄语",
            "TR": "土耳其语",
            "TH": "泰语",
            "IT": "意大利语",
            "ID": "印尼语",
            "VN": "越南语",
            "ES": "西班牙语",
            "KR": "韩语",
            "JP": "日语",
            "PT": "葡萄牙语",
            "DE": "德语",
            "FR": "法语",
        };
        for (let i = 0; i < Object.keys(options).length; i++) {
            let option = document.createElement("option");
            option.value = Object.keys(options)[i];
            option.text = Object.values(options)[i];
            select.appendChild(option);
        }
        // 找到目标cell元素并将<select>添加到其中
        cell.appendChild(select);
    }
</script>

</body>
</html>